<template>

	<view class="home-bottom-page">
		<!-- <z-paging class="home-bottom-page-list" ref="paging" :fixed="false" :auto="false" :auto-clean-list-when-reload="false"> -->
		<cell v-for="(item, index) in dataList" :key="item.nid">
			<view class="home-bottom-page-item flex-row" @tap="onclick">

				<view class="home-bottom-page-text-box flex-column">

					<!-- 标题 -->
					<text class="home-bottom-page-title">{{item.title}}</text>

					<view class="home-bottom-page-text-box1 flex-row">
						<!-- 时间 -->
						<text class="home-bottom-page-time">{{item.update_time}}</text>
						<image class="home-bottom-page-watch-ico"
							src="https://mcdn.chatgk.com/xcx/static/images/home/home-bottom-page-watch-ico.png"></image>
						<!-- <text class="home-bottom-page-watch">{{item.watch}}</text> -->
					</view>

				</view>
			</view>
		</cell>
		<!-- </z-paging> -->
	</view>
</template>

<script>
	// import homeBottomPage from './home-bottom-page.nvue';
	import request from '@/common/request/api.js'

	export default {

		props: {
			//当前组件的index，也就是当前组件是swiper中的第几个
			tabIndex: {
				type: Number,
				default: function() {
					return 0
				}
			},
			//当前swiper切换到第几个index
			currentIndex: {
				type: Number,
				default: function() {
					return 0
				}
			}
		},

		data() {
			return {
				dataList: []
			}
		},

		watch: {
			// currentIndex: {
			// 	handler(newVal) {
			// 		if (newVal === this.tabIndex) {
			// 			//懒加载，当滑动到当前的item时，才去加载
			// 			if (!this.firstLoaded) {
			// 				this.$nextTick(() => {
			// 					this.$refs.paging.reload();
			// 				})
			// 			}
			// 		}
			// 	},
			// 	immediate: true
			// },
		},

		created() {
			this.getHotNews()
			// for (var i = 1; i <= 32; i++) {
			// 	this.dataList.push({
			// 		id: i,
			// 		title: "两财一贸保录比及复试线分析两财一贸保录比及复试线分析",
			// 		ico: "https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngee8d20962dcd1035a86427005575e9952411d8f225e22ec216a1932b94c007b8",
			// 		time: "2023-02-05 14:59",
			// 		watch: "1245"
			// 	});
			// }
		},

		methods: {
			getHotNews() {
				request.hotNews().then(res => {
					this.dataList = res.data
				})
			},
			//设置嵌套list父容器支持swiper-list吸顶滚动效果
			setSpecialEffects(height) {
				this.$refs.paging.setSpecialEffects({
					//这个id就是sticky-swiper-demo-n中设置的nvue-list-id，二者的值必须完全一致！
					id: 'z-paging-nlist',
					headerHeight: height
				});
			},

			onclick(e) {},

			loadData() {
				// 首次激活时被调用
			},

			clear() {
				// 释放数据时被调用，参考 swiper-list 缓存配置
				// this.dataList.length = 0;
			}
		}

	}
</script>

<style scoped>
	/* 页面 */
	.home-bottom-page {
		/* padding: 10rpx 0rpx 10rpx 0rpx; */
		/* flex: 1; */
		background-color: #F8F8F8;
	}

	/* 列表 */
	.home-bottom-page-list {
		background-color: #F8F8F8;
	}

	.home-bottom-page-item {
		margin: 10rpx 32rpx 10rpx 32rpx;
		height: 168rpx;
		align-items: center;
		justify-content: flex-start;
		border-radius: 10rpx;
		background-color: #fff;
	}

	.home-bottom-page-ico {
		width: 184rpx;
		height: 120rpx;
		margin-left: 32rpx;
		border-radius: 10rpx;
	}

	.home-bottom-page-text-box {
		margin: 0rpx 32rpx 0rpx 28rpx;
		flex: 1;
		height: 168rpx;
	}

	.home-bottom-page-title {
		margin-top: 28rpx;
		height: 40rpx;
		font-size: 28rpx;
		color: #333333;
		font-weight: bold;
		lines: 1;
		text-overflow: ellipsis;
	}

	.home-bottom-page-text-box1 {
		margin-top: 38rpx;
		/* flex: 1; */
		height: 34rpx;
		align-items: center;
		justify-content: flex-start;
		/* background-color: #f00; */
	}

	.home-bottom-page-time {
		/* flex: 1; */
		font-size: 24rpx;
		color: #999999;
		/* background-color: #00f; */
	}

	.home-bottom-page-watch-ico {
		width: 30rpx;
		height: 20rpx;
	}

	.home-bottom-page-watch {
		margin-left: 8rpx;
		font-size: 24rpx;
		color: #999999;
	}
</style>